<script setup>
import {ref} from 'vue';
import {useRouter} from "vue-router";
import {showFailToast, showConfirmDialog, showSuccessToast} from "vant";
import {queryPatients, deletePatient} from "@/api/eyeCare.js";

const loading = ref(false);
const list = ref([]);
const finished = ref(false);
const searchValue = ref("");
const router = useRouter();

let page = 1
let pageSize = 10
let total = 0

const onLoad = () => {
  loading.value = true;
  queryPatients({page, pageSize, name: searchValue.value})
      .then(res => {
        list.value = res.data.records
        page = res.data.current
        pageSize = res.data.size
        total = res.data.total
      })
      .finally(() => {
        loading.value = false
        finished.value = page * pageSize >= total
      })
}

const childrenAdd = () => {
  router.push({
    name: 'PatientAdd',
  })
}
const onSearch = () => {
  page = 1
  onLoad()
}
const edit = (id) => {
  router.push({
    path: `/patient/${id}`,
  })
}

const onRemove = (id) => {
  showConfirmDialog({
    message: '是否删除该就诊人？',
  })
      .then(() => {
        deletePatient(id)
            .then(res => {
              if (res.code === 0) {
                showSuccessToast("删除成功")
                onLoad()
              }
            })
            .catch(err => {
              showFailToast(err.message)
            })
      })
      .catch(() => {
      });
}

const onLongpress = () => {
  console.log("longpress")
}

</script>

<template>
  <div class="main-content">
    <van-list
        v-model:loading="loading"
        :finished="finished"
        @load="onLoad"
    >
      <van-cell-group inset v-for="item in list" :key="item">
        <van-swipe-cell>
          <div class="cell">
            <van-icon name="user-circle-o" size="50"></van-icon>
            <van-cell :to="`patient/${item.id}/visions`">
              <template #title>
                <div class="title-container">
                  <div class="title">{{ item.name }}</div>
                </div>
              </template>
              <template #label>
                <div class="label-container">
                  <span v-if="item.sex === 1" type="success">男</span>
                  <span v-if="item.sex === 2" type="warning">女</span>
                  <span v-if="item.sex === 0">未知</span>
                  <span class="age">{{ item.age }}岁</span>
                </div>
              </template>
            </van-cell>
          </div>

          <template #right>
            <van-button
                class="edit-button"
                size="small"
                type="primary"
                @click="edit(item.id)"
                square
            >编辑
            </van-button>
            <van-button
                class="delete-button"
                size="small"
                type="danger"
                @click="onRemove(item.id)"
                square
            >删除
            </van-button>
          </template>
        </van-swipe-cell>
      </van-cell-group>

      <van-cell-group inset @click="childrenAdd">
        <div class="cell">
          <van-icon name="plus" size="50"></van-icon>
          <span class="add-btn-text">新增就诊人</span>
        </div>
      </van-cell-group>
    </van-list>
  </div>
</template>

<style scoped lang="scss">
.main-content {

  .delete-button, .edit-button {
    height: 100%;
  }

  .add-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 16px;
    width: calc(100% - 32px);
  }

  .van-cell-group {
    margin-top: 16px;

    .cell {
      display: flex;
      align-items: center;
      padding: 16px;
      height: 66px;
    }

    .add-btn-text {
      margin-left: 16px;
    }

    .title-container {
      display: flex;

      .title {
        margin-right: 1rem;
        font-weight: bold;
        font-size: 20px
      }
    }

    .label-container {
      font-size: 16px;

      span {
        margin-right: 16px;
      }
    }
  }
}

</style>